<template>
  <div class="card-item shadow-sm" v-loading="dataStatus=='loading'">
    <div class="h-full flex-center" v-if="dataStatus=='error'">
      <component-page-loading font-size="1rem" status="error" @reload="dataStatus = 'loading'"></component-page-loading>
    </div>
    <div class="h-full flex flex-col justify-between" v-else>
      <div class="item-title">
        <div>{{ $t('index.chart.online.title') }}</div>
        <div>
          <el-button circle size="mini" icon="el-icon-arrow-left" @click="dayPre"></el-button>
          <component-page-option-datetime type="date" size="small" align="right" :clearable="false" class="w-32"
                                          :init-last-day="0" v-model="filterOption.datetime" @change="filterChange">
          </component-page-option-datetime>
          <el-button circle size="mini" icon="el-icon-arrow-right" @click="dayNext" :disabled="isNextButtonDisabled" ></el-button>
        </div>
      </div>
      <div class="item-chart">
        <component-page-echarts ref="chartLine"></component-page-echarts>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment-timezone";

export default {
  data() {
    return {
      dataStatus: 'dle',
      today: null,
      filterOption: {
        datetime: null,
      },
      data: null,
      // isNextButtonDisabled: false,
    }
  },
  computed: {
    nextDayStatus() {
      return new Date(this.filterOption.datetime * 1000).getTime()
          >= this.$store.getters['config/timedDayTimestamp']();
    },
    isNextButtonDisabled() {
      return new Date(this.filterOption.datetime * 1000).getTime()
          >= this.$store.getters['config/timedDayTimestamp']();
    }
  },
  watch: {
    '$i18n.locale': function (n, o) {
      if (this.data != null) {
        this.initChart(this.data);
      }
    },
  },
  methods: {
    initChart(chart) {
      let option = {
        color: ["#91c7ae", "#d48265"],
        tooltip: {
          trigger: 'axis',
        },
        legend: {
          type: 'scroll',
          padding: [0, 100],
          data: [
            this.$t('index.chart.online.online'),
            this.$t('index.chart.online.gaming'),
          ],
        },
        grid: {
          top: 40,
          right: 40,
          bottom: 40,
          left: 80,
        },
        xAxis: {
          show: true,
          boundaryGap: false,
          data: chart.timed
        },
        yAxis: {
          show: true,
          axisLine: {show: false},
          axisTick: {show: false},
        },
        series: [{
          type: 'line',
          name: this.$t('index.chart.online.online'),
          data: chart.data.online.map(item => this.$store.getters['config/filterNumeral'](item))
        }, {
          type: 'line',
          name: this.$t('index.chart.online.gaming'),
          data: chart.data.gaming.map(item => this.$store.getters['config/filterNumeral'](item))
        }]
      };
      // 渲染图表
      this.$refs.chartLine.setOption(option);
    },
    filterChange() {
      this.dataStatus = 'loading';
      // 记录今日时间戳
      if (this.today == null) {
        this.today = this.filterOption.datetime;
      }
      this.getData();
    },
    dayPre() {
      this.dataStatus = 'loading';
      this.filterOption.datetime -= 86400;
      this.getData();
    },
    dayNext() {
      this.dataStatus = 'loading';
      this.filterOption.datetime += 86400;
      this.getData();
    },
    getData() {
      axios.get('/index/chart/online', {
        params: this.filterOption
      }).then((response) => {
        if (response.data.resp_msg.code == 200) {
          this.dataStatus = 'dle';
          this.data = response.data.resp_data;
          // 渲染图表
          this.initChart(this.data);
        } else {
          this.dataStatus = 'error';
        }
      });
    },
  },
  mounted() {
    // 定时更新在线状态
    this.intervalId = setInterval(() => {
      if (this.today == this.filterOption.datetime && this.dataStatus != 'loading') {
        this.getData();
      }
    }, 60000);
  },
  beforeDestroy() {
    clearInterval(this.intervalId);
  }
}
</script>

<style lang="scss" scoped>
.card-item {
  background-color: #ffffff;
  border-radius: 7px;
  overflow: hidden;
  height: 320px;
}

.card-item .item-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 0 20px;
  height: 60px;
}

.card-item .item-number {
  font-size: 2.5rem;
  position: absolute;
  left: 20px;
  top: 40px;
}

.card-item .item-chart {
  height: 260px;
}
</style>
